<template>
  <video 
    class="login_bg"
    :src="myVideo"
    loop        
    muted
    object-fit="cover"
    :controls="false"
    :show-play-btn="false"
    :show-center-play-btn="false"
    :enable-progress-gesture="false"
    autoplay></video>
  <div class="login">
    <div class="container">
      <div class="login_intro">需要授权手机号,以便于您下次直接登录,我们将会严格保护您的隐私,请放心使用</div>
      <div class="btn login_btn" @click="wxLogin">微信一键登录</div>
      <div class="btn phone_btn" @click="phoneLogin">手机号码登录</div>
      <div class="agree">
        <checkbox-group @change="changeCheck">
          <checkbox :value="checkVal" class="agree_radio" type="radio" :checked="checked" color="#1c6ad7" />
        </checkbox-group>
       
        同意<span @click="userServe">《用户协议》</span> 和 <span @click="PrivacyPolicy">《隐私政策》</span>
      </div>
      <div class="no_empower" @click="goHome">暂不授权</div>
    </div>
    <van-dialog
      use-slot
      title="手机号码登录"
      :show="phoneShow"
      show-cancel-button
      @cancel="onCancel"
      @confirm="onConfirm"
      confirm-button-color="#1c6ad7"
    >
      <div class="phone-box">
        <div class="phone-item">
          <span class="icon iconfont icon-shouji1"></span>
          <input class="phone-input" :value="phone" placeholder-class="phone_bg" type="number" maxlength="11" placeholder="请输入手机号" />
        </div>
        <div class="phone-item">
          <span class="icon iconfont icon-duanxinyanzhengma"></span>
          <input class="phone-input" :value="verifyCode" placeholder-class="phone_bg" type="number" maxlength="4" placeholder="请输入验证码" />
          <span class="get_code" @click="getCode">获取验证码</span>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script setup>
  import { onLoad } from "@dcloudio/uni-app"
  import {ref,reactive} from 'vue'
  import {} from '@/config/api'
  const checked = ref(true)
  const phoneShow = ref(false)
  const checkVal = ref(false)
  const myVideo = ref('http://www.douyin.com/aweme/v1/play/?video_id=v027feg10000cg4kj6jc77u2nr5onqsg&line=0&file_id=b17a32eb4c7a45eea0f1efe0e04c9fb8&sign=06686b5d9bb51f977081160c6b7f897c&is_play_url=1&source=PackSourceEnum_AWEME_DETAIL&aid=6383');
  // const myVideo = ref('/static/login.mp4')
  const phone = ref('');
  const verifyCode = ref('');
  const wxLogin = ()=>{
    if(!checked.value){
     uni.showToast({title:'请先勾选用户协议和隐私政策',icon:'none'})
     return 
    }
    uni.getUserInfo({
      success(res){
        uni.login({
          success(res){

          }
        })
        console.log(res,'=======')
      }
    })
  }
  const phoneLogin = ()=>{
    if(!checked.value){
     uni.showToast({title:'请先勾选用户协议和隐私政策',icon:'none'})
     return 
    }
    phoneShow.value = true
  }
  const onCancel = ()=>{
    phoneShow.value = false
    phone.value = ''
    verifyCode.value = ''
  }
  const onConfirm = ()=>{
    onCancel()
  }
  const changeCheck = e =>{
    checked.value = e.detail.value.length>0
  }
  const getCode = ()=>{}
  const userServe = ()=>{
    uni.navigateTo({
      url:'/pages/my/serve'
    })
  }
  const PrivacyPolicy = ()=>{
    uni.navigateTo({
      url:'/mysub/conceal/index'
    })
  }
  const goHome = () => {
    uni.switchTab({
      url:'/pages/home/index'
    })
  }
</script>
<style lang="scss" scoped>
.login_bg{
  width: 100%;
  height: 100vh;
}
.login{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .container{
    margin: 0 40px;
    .login_intro{
      font-size: 12px;
      color: #ccc;
      margin-bottom: 20px;
    }
    .btn{
      height: 40px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-bottom: 10px;
      background-color: #fff;
    }
    .login_btn{
      background-color: #1c6ad7;
      color: #fff;
    }
    .agree{
      display: flex;
      font-size: 12px;
      align-items: center;
      justify-content: center;
      color: #ccc;
      label{
        color:#1c6ad7;
      }
      .agree_radio{
        transform: scale(0.6);
      }
    }
    .no_empower{
      font-size: 12px;
      color: #ccc;
      text-decoration: underline;
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
  
  .phone-box{
    margin:20px;
    .phone-item{
      height: 30px;
      border-radius: 15px;
      border:1px solid #f7f7f7;
      padding:0 10px;
      display: flex;
      margin-bottom: 10px;
      align-items: center;
      background-color: #f7f7f7;
      .icon{
        font-size: 14px;
        margin-right: 10px;
      }
      .phone-input{
        flex: 1;
      }
      .get_code{
        color: #1c6ad7;
      }
     
    }
  }
  
}
</style>
<style lang="scss">

</style>